<template>
	<view class="home">
		<!-- 导航 -->
		<!-- 导航 -->
		<u-navbar bgColor="#ffffff" placeholder :title="title" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
		</u-navbar>
			<view class="time-switcher">
				<!-- 自定义样式和文字 -->
				<SimpleYearSwitcher prev-text="上一年" next-text="下一年" :btn-style="{
				    color: '#ffffff'
				  }" :text-style="{
				    fontSize: '40rpx',
				    color: '#000000'
				  }" @change="handleYearChange" />
			</view>

		<!-- 分段器 -->
		<view class="content">
			<!-- 雨量计信息 -->
			<view class="">
				<!-- 表格 -->
				<view class="table_box">
					<wyb-table ref="table" :headers="headers" :contents="contents" :font-size="fontSize"
						:value-format="valueFormat" border-color="#000000" content-bg-color="#ff8080"
						content-ft-color="#314761" height="1300rpx" :loading="loading" loader-bg-color="rgba(0,0,0,0.1)"
						loader-color="#fff" loader-size="100" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SimpleYearSwitcher from '@/components/SimpleYearSwitcher.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan,
			wybTable,
			SimpleYearSwitcher
		},
		data() {
			return {
				loading: false,
				fontSize: [40],
				headers: [{
					label: '雨量站',
					key: 'name',
					width: 350
				}, {
					label: '年总人工',
					key: 'yearRg',
					width: 130
				}, {
					label: '年总自计',
					key: 'yearZj',
					width: 130
				},{
					label: '1月人工',
					key: 'janRg',
					width: 100
				}, {
					label: '1月自计',
					key: 'janZj',
					width: 100
				}, {
					label: '2月人工',
					key: 'febRg',
					width: 100
				}, {
					label: '2月自计',
					key: 'febZj',
					width: 100
				}, {
					label: '3月人工',
					key: 'marRg',
					width: 100
				}, {
					label: '3月自计',
					key: 'marZj',
					width: 100
				}, {
					label: '4月人工',
					key: 'aprRg',
					width: 100
				}, {
					label: '4月自计',
					key: 'aprZj',
					width: 100
				}, {
					label: '5月人工',
					key: 'mayRg',
					width: 100
				}, {
					label: '5月自计',
					key: 'mayZj',
					width: 100
				}, {
					label: '6月人工',
					key: 'junRg',
					width: 100
				}, {
					label: '6月自计',
					key: 'junZj',
					width: 100
				}, {
					label: '7月人工',
					key: 'julRg',
					width: 100
				}, {
					label: '7月自计',
					key: 'julZj',
					width: 100
				}, {
					label: '8月人工',
					key: 'augRg',
					width: 100
				}, {
					label: '8月自计',
					key: 'augZj',
					width: 100
				}, {
					label: '9月人工',
					key: 'sepRg',
					width: 100
				}, {
					label: '9月自计',
					key: 'sepZj',
					width: 100
				}, {
					label: '10月人工',
					key: 'octRg',
					width: 120
				}, {
					label: '10月自计',
					key: 'octZj',
					width: 120
				}, {
					label: '11月人工',
					key: 'novRg',
					width: 120
				}, {
					label: '11月自计',
					key: 'novZj',
					width: 120
				}, {
					label: '12月人工',
					key: 'decRg',
					width: 120
				}, {
					label: '12月自计',
					key: 'decZj',
					width: 120
				}],
				valueFormat: [{
						key: 'name', //名字
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'janRg', //1
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'janZj', //1
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'febRg', //2
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'febZj', //2
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'marRg', //3
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'marZj', //3
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'aprRg', //4
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'aprZj', //4
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'mayRg', //5
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'mayZj', //5
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'junRg', //6
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'junZj', //6
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'julRg', //7
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'julZj', //7
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'augRg', //8
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'augZj', //8
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'sepRg', //9
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'sepZj', //9
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'octRg', //10
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'octZj', //10
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'novRg', //11
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'novZj', //11
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'decRg', //12
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'decZj', //12
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'yearRg', //年
						style: {
							color: '#ffffff',
							bgColor: '#3d84a8'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'yearZj', //年
						style: {
							color: '#ffffff',
							bgColor: '#3d84a8'
						}
					},
				],
				contents: [],
				id: '',

			}
		},
		onLoad(option) {
			// 默认历史
			this.id = option.id
			this.title = option.name
		},
		onShow() {

		},
		methods: {
			handleYearChange(data) {
			  this.tabularData(data)
			},
			// 表格数据 雨量站列表
			tabularData(data) {
				uni.$u.http.get('/api/device/device/getRainfallStatisticsYearList', {
					params: {
						"rfsgId": this.id,
						"year": data.year + '',
					}
				}).then(res => {
					this.contents = res.data
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			iconFn() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
	}
</script>
<style scoped lang="scss">
	// 时间切换
	.time-switcher {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 650rpx;
		background-color: #e4e8ea;

	}

	.scroll-Y {
		max-height: 1000rpx;
	}

	.home {
		min-height: 100vh;
		background-color: #ecf3f7;

		.content {
			.con_bom {
				// color: #ffffff;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}

			}

			// 每日雨量
			.rainfallToday {
				border-radius: 30rpx;
				margin: 30rpx 30rpx 0rpx 30rpx;
				padding: 30rpx 30rpx 80rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rainfallToday_i {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

					.rainfallToday_a {
						color: #ffffff;
						font-size: 40rpx;
					}

					.rainfallToday_b {
						font-size: 50rpx;
						color: #67fff3;
					}
				}
			}

			.table_box {
				margin-top: 10rpx;
				// background-color: #4fc5bb;
			}

			.hyetal_box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #ffffff;

				.hyetal_a {
					padding: 20rpx;
					margin: 20rpx;
					border-radius: 20rpx;
					font-size: 40rpx;
					background-color: #6390c3;
				}

				.acvhyetal_a {
					background-color: #8f897e;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #7a7d81;
	}
</style>